<template>
    <div style="height:100%">
      <!-- 地图容器 -->
      <div id="map" class="map"></div>
      <!-- 左侧机构树 -->
      <!-- <div class="map-btn-box" v-if="isShowZoomTool">
          <div class="map-btn" title="放大" @click="zoomMap(1)"><i class="el-icon-plus"></i></div>
          <div class="map-btn" title="缩小" @click="zoomMap(2)"><i class="el-icon-minus"></i></div>
          <div class="map-btn" title="复位" @click="restcenter()"><i class="iconfont iconfuwei"></i> </div>
      </div> -->
    </div>
   
</template>
<script>
// 映入css文件、
import "ol/ol.css";
import Map from "ol/Map.js";
import View from "ol/View.js";
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';
import { XYZ, TileWMS, Vector as VectorSource } from 'ol/source.js';
import { transform, get as getProjection} from "ol/proj";

import MVT from 'ol/format/MVT.js';
import {createXYZ} from 'ol/tilegrid';
import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorTileSource from 'ol/source/VectorTile.js';
import TileGrid from 'ol/tilegrid/TileGrid';
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
        console.log(transform([113.4, 34.56],"EPSG:4326", "EPSG:3857"))
        var olMap = new Map({
            target: "map",
            view: new View({
                center:transform([113.4, 34.56],"EPSG:4326", "EPSG:3857"),
                zoom: 17
            }),
        });
        console.log(olMap)
          /**
        * 加载天地图的矢量图层
        */
        var TiandiMap_vec = new TileLayer({
            name: '天地图矢量图层',
            source: new XYZ({
                url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d', //mapkey为天地图密钥
                wrapX: false,
                //设置crossOrigin
                crossOrigin: 'anonymous' 
            }),
        });
        olMap.addLayer(TiandiMap_vec);

        var resolutions = [];
        for (var i = 0; i <= 8; ++i) {
        resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
        }

        var tile_layer = new VectorTileLayer({
            source: new VectorTileSource({
                format: new MVT(),  
                projection: 'EPSG:3857',
                crossOrigin: 'Anonymous',
                tileGrid:new TileGrid({
                    extent: getProjection('EPSG:3857').getExtent(),
                    resolutions: resolutions,
                    tileSize: 512,
                }),
                tileUrlFunction:function(tileCoord){      
                return ( 
                    'http://127.0.0.1:5000/gis/city/title/{z}/{x}/{y}' 
                )
                    .replace('{z}', String(tileCoord[0] * 2 - 1))
                    .replace('{x}', String(tileCoord[1]))
                    .replace('{y}', String(tileCoord[2]))
                    
                }
                        
            })
        })
        olMap.addLayer(tile_layer)
    },
    /**
     * 地图缩放事件
     */
    zoomMap(type){
      let view = this.map.map.getView()
      let zoom = view.getZoom()
      if(type==1){
        view.setZoom(zoom+1)
      }else{
        view.setZoom(zoom-1)
      }
    },
    /**
     * 复位事件
     */
    restcenter(){
      this.map.restMap({
        center:this.center||config.center,
        zoom: this.zoom || config.zoom
      })
    },
  }
};
</script>
<style>
.map {
  width: 100%;
  height: 100%;
}
.map-btn-box{
  background: white;
  border-radius: 3px;
  margin-bottom: 10px;
  border-color: #e9e9e9;
  position: relative;
  top: -99%;
  left: 10px;
  width: 28px;
}
.map-btn{
    height: 25px;
    width: 25px;
    line-height: 25px;
    background: white;
    text-align: center;
    border-radius: 5px;
    border-bottom: 1px solid #e9e9e9;
    color: black;
}
.map-btn:hover{
  color: #409EFF;
  cursor: pointer;
}
</style>


